extends ./../layout

//- 网站的头部信息这边拆分出来，便于每个页面的SEO配置和配置页面独有的css，js
block title

  meta(name="description" content="怪客课堂是合肥源学思信息科技有限公司旗下的在线学习品牌，我们专注于通过不断的项目实战和实战经验分享来帮助更多想要进一步提高自身能力的人，同时也为想要从事编程行业的朋友提供一个更加合理快速的通道。在这里你能学习到更多更加有用的实战技能，更多更加干货和有分量的基础视频，我们拒绝废话拒绝啰嗦，在这里一切知识都为了更加符合企业工作需要，提升自我价值实现自我理想。")
  meta(name="keywords" content="编码猿，html，css，后端，vue，php，java，node，koa, 在线技术学习")
  link(rel="stylesheet" href="/css/home/index.css" )
  link(rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" )

//- 网站的主体内容区域
block content

  .index(class="pages" data-module="index")
    .why
      .container
        h2 为什么 [ 怪客课堂 ] 是您最好的选择？
        ul(uk-scrollspy="cls:uk-animation-fade; target: li; delay: 500; repeat: true")
          li
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-shuzhuangguanxiwangluotu')
            p 覆盖面广
            span 课程内容涉及前端，后端，数据库，服务器，运维等众多技术点
          li
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-xiaolian')
            p 简单&强大
            span 提供免费的基础课程让您快速入门，同时提供更多项目实战
          li
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-kehuxinxichaxun')
            p 免费答疑
            span 专业的技术群为您的学习提供免费的项目答疑和在线帮助
    .addUser
      .container
        .infos.uk-animation-toggle
          p 为新人筑基，为老司机进阶
          if login
            a.uk-animation-shake(href="/my") 欢迎用户：#{login.username}
          else
            a.uk-animation-shake(href="/reg?from=/") 注 册 / 登 录
    .doubt
      .container
        h2 我能学到什么？
        ul(uk-scrollspy="target: > li; cls: uk-animation-slide-bottom; delay: 300; repeat: true")
          li(uk-scrollspy-class="uk-animation-slide-top")
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-HTML')
            p 前端
            span Vue.js React.js TypeScript WebPack Gulp
          li(uk-scrollspy-class="uk-animation-slide-top")
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-PHP')
            p 后端
            span Java Php Python Go Dart Node.js
          li(uk-scrollspy-class="uk-animation-slide-top")
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-zuzhiheguanlitubiao-')
            p 数据库 
            span Mysql MongoDB SQLServer
          li
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-wulitu_yingyongfuwuqi')
            p 服务器
            span Ubuntu Centos Windows 
          li
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-APPkaifa')
            p App开发
            span Flutter ReactNative Vue&AndroidSdk Uni-app
          li
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-PC')
            p 桌面开发
            span Nw.js Electron 
    .video
      .container
        h2 最新课程
        ul
          each val, index in newCourse
            li
              a(href="/info/#{val.objectId}" target="_blank")
                img(src="#{val.courseImageUrl}", alt="#{val.courseTitle}")
                h3 #{val.courseTitle.substring(0,30)}..
                p #{val.courseDesc.substring(0,25)}..
        .more
          p 
            a(href="/course/xNBAqqqr" target="_blank") 全部课程
            svg.icon(aria-hidden='true')
              use(xlink:href='#icon-gengduo')
    .userMessage
      .container
        h2 学员评价
        .swiper-container
          .swiper-wrapper
            .swiper-slide
              .slide-header
                img(src="https://upload.jianshu.io/users/upload_avatars/5685558/23e20d58-c5e1-4fd6-90d4-a3752cbe7d6a?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96", alt="")
              .slide-title 飞翔的企鹅
              .slide-message 
                | 基础阶段的课程内容通俗易懂，学起来十分的快，而且老师干货很多不啰嗦，一言不合就写代码，是我喜欢的风格。晚上一般都是带着耳机看着视频安静的学习，哈哈哈！！
            .swiper-slide 
              .slide-header
                img(src="https://upload.jianshu.io/users/upload_avatars/2599324/d1282140-a19e-451d-b81f-3333229645ef.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96", alt="")
              .slide-title 躁动的青春
              .slide-message 
                | 后面的进阶课程很适合我们看啊，公司用到的技术比较少，最近迷茫的很，直到遇到老师的视频，跟着视频后面可以学到很多的项目实战套路和姿势，挺好的，建议学习！
            .swiper-slide 
              .slide-header
                img(src="https://upload.jianshu.io/users/upload_avatars/13418382/84b7c9d6-81d6-4ea4-96f6-0fd1db4dd281.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96", alt="")
              .slide-title 蓝猫163
              .slide-message 
                | 总体来说视频的质量很高，适合比较广泛的学习群体，无论是新手还是老司机都能看，而且老师平时在群里面也很积极的帮助我们解决遇到的问题，已经收藏并推荐给更多的朋友。
          .swiper-pagination
    .newsList
      .container
        h2 最新公告
        ul
          each val, index in newsList
            li
              p #{val.newsTitle}
              span #{val.newsContent}

